<template>
  <div class="app-container p-n">
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="6" style="padding: 0 10px">
        <div class="grid-content bg-white">
          <el-card class="box-card">
            <div slot="header" class="clearfix" style="padding: 0px;border-bottom: 0;">
              <el-tabs
                :stretch="true"
                v-model="activeName"
                style="color: #28a087;backgroud-color: #28a087;min-height: 60px;"
                @tab-click="handleClick"
              >
                <el-tab-pane label="未结案" name="1"/>
                <el-tab-pane label="已结案" name="3"/>
                <el-tab-pane label="我的全部" name="5"/>
                <el-tab-pane label="所有" name="10"/>
              </el-tabs>
            </div>
            <el-row type="flex" class="p-b-15" justify="space-around">
              <el-col :span="6">
                <div class="grid-content">
                  <el-select v-model="infoType" filterable placeholder="信息单类型" @change="searchFrom">
                    <el-option
                      v-for="item in infoTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="16" :offset="0">
                <el-date-picker
                  v-model="listQuery.time"
                  :picker-options="pickerOptions"
                  type="daterange"
                  class="full-width"
                  unlink-panels
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                  size="small"
                />
              </el-col>
            </el-row>
            <el-row type="flex" class="p-b-5" justify="space-around">
              <el-col :span="17">
                <div class="grid-content">
                  <el-input v-model="listQuery.keyword" placeholder="输入查询信息" clearable>
                    <i slot="prefix" class="el-input__icon el-icon-search"/>
                  </el-input>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="grid-content text-right">
                  <el-button type="primary" class="default-background-color full-width" @click="searchFrom">查询</el-button>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-around">
              <el-col :span="23">
                <div class="grid-content">
                  <el-table
                    ref="singleTable"
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%;"
                    height="418"
                    @current-change="currentChangeTable"
                  >
                    <el-table-column property="address" class="info-table">
                      <template slot-scope="scope">
                        <el-row style="justify-content:flex-start;align-items: center;display:flex;">
                          <div class="grid-content" style="margin-right:10px;">
                            <el-tag
                              v-if="scope.row.informationEventType==='需求'"
                              type="success"
                            >{{ scope.row.informationEventType }}</el-tag>
                            <el-tag
                              v-else-if="scope.row.informationEventType==='投诉'"
                              type="danger"
                            >{{ scope.row.informationEventType }}</el-tag>
                            <el-tag
                              v-else-if="scope.row.informationEventType==='咨询'"
                            >{{ scope.row.informationEventType }}</el-tag>
                          </div>
                          <div class="grid-content" style="display: inline-block;width: 70%;">
                            <div>
                              <span class="f-14" style="color: #1b263a">{{ scope.row.name?scope.row.name:'--' }} : {{ !scope.row.remark?'--':scope.row.remark.length>15 ?scope.row.remark.substr(0,14)+'...':scope.row.remark }}</span>
                            </div>
                            <div class="bottom clearfix">
                              <time
                                class="time"
                              >{{ scope.row.currentTime |parseDate('{y}-{m}-{d} {h}:{i}:{s}') }}</time>
                            </div>
                          </div>
                          <div class="grid-content" style="display: inline-block;height: 49px;">
                            <el-badge
                              :value="scope.row.readCount"
                              :max="9"
                              :hidden="scope.row.readCount === 0 || activeName === '10'"
                              class="status-item f-12"
                            ><el-button type="text" size="small">{{ scope.row.informationStatus }}</el-button>
                            </el-badge>
                          </div>
                        </el-row>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>

            <!--分页-->
            <el-row type="flex" justify="space-around">
              <el-col :span="23">
                <div class="grid-content">
                  <div class="pagination-container" style="padding-top: 68px;height: 100px;">
                    <el-pagination
                      v-show="total>0"
                      :current-page="listQuery.page"
                      :page-sizes="[10,20,30, 50]"
                      :page-size="listQuery.pageSize"
                      :total="total"
                      :pager-count="5"
                      class="text-center"
                      background
                      layout="prev, pager, next, total, sizes"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                    />
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :span="18" style="padding: 0 10px 0 0;">
        <div class="grid-content bg-white">
          <el-card :body-style="{ padding: '0px' }" class="box-card">
            <el-row type="flex" class="full-height" justify="space-around">
              <el-col :span="16" class="right-vertical">
                <div class="grid-content">
                  <div class="grid-header">
                    <div class="header-content p-10-20 p-t_b-19 clearfix" style="font-weight: 700;min-height: 60px;">
                      跟踪单
                      <span>{{ tableInfo.informationNumber }}</span>
                    </div>
                  </div>
                  <div id="message-body" class="grid-body p-10-20 clearfix">
                    <div class="message item">
                      <ul>
                        <li v-for="msg in messageData" :key="msg.id" >
                          <p class="time">
                            <span v-if="msg.message!=='处理完成结案'">{{ msg.time |parseDate('{y}-{m}-{d} {h}:{i}:{s}') }}{{ msg.type?(' ' + msg.type):'' }}</span>
                            <span v-else>{{ msg.time |parseDate('{y}-{m}-{d} {h}:{i}:{s}') }}{{ msg.createName?(' ' + msg.createName):'' }}-结案</span>
                          </p>
                          <div v-show="msg.message!=='处理完成结案'" :class="{ self: msg.self }" class="main">

                            <div v-if="msg.self" class="avatar circle">
                              <span>{{ msg.createName ? msg.createName.replace(/^(.*[n])*.*(.|n)$/g, "$2") : '--' }}</span>
                            </div>
                            <div v-else class="avatar circle">
                              <span>{{ msg.createName ? msg.createName.replace(/^(.*[n])*.*(.|n)$/g, "$2") : '--' }}</span>
                            </div>
                            <div>
                              <div style="margin-bottom: 8px;">
                                <label class="f-12">{{ msg.userType?msg.userType:'--' }}:{{ msg.createName }}</label>
                              </div>
                            </div>
                            <div v-if="checkMessageImageType(msg.message)" class="image-context">
                              <el-image
                                :src="msg.message"
                                :preview-src-list="[msg.message]">
                                <div slot="error" class="image-slot">
                                  <i class="el-icon-picture-outline"/>
                                </div>
                              </el-image>
                            </div>
                            <div v-else class="text" style="max-width: 80%;background-color:#f0f2fa;">
                              <p >{{ msg.message }}</p>
                            </div>

                            <div v-if="msg.synchFlag === 'N'" class="status f-12 mt-5">
                              <i v-show="msg.readStatus=='已阅'" class="el-icon-check"/>
                              <span v-if="msg.readStatus=='已阅'">{{ msg.readStatus }}({{ msg.readName }})</span>
                              <span v-else>未阅</span>
                            </div>

                            <div v-else class="status f-12 mt-5">
                              <i v-show="msg.synchStatus=='已同步'" class="el-icon-check"/>
                              <span>{{ msg.synchStatus }}</span>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <el-dialog :visible.sync="dialogImageVisible" width="38%">
                    <img :src="messageImage" width="100%" alt="">
                  </el-dialog>
                  <div class="grid-bottom p-10-20 clearfix">
                    <el-input
                      :disabled="disabledRemark"
                      :rows="3"
                      :max="10"
                      :min="1"
                      v-model="snedMsg"
                      type="textarea"
                      placeholder="请输入200字以内的描述"
                      clearable
                    />
                    <!-- 权限控制 （备注区域暂时都可以看到    1、未结案并且有结案权限的可以下送 2、咨询单只能直接结案 ）-->
                    <el-row
                      v-if="tableInfo.informationNumber && tableInfo.permission"
                      class="p-t-5 text-right"
                    >
                      <el-checkbox v-model="tableInfo.syncWithPartner" label="同步到合作商"/>
                      <el-button type="primary" class="ml-10" @click="editTraceInfo">
                        <i class="icon-commonfabusekuai el-icon--left"/>发送
                      </el-button>
                      <el-upload
                        :action="importImageUrl"
                        :data="tableInfo"
                        :limit="1"
                        :before-upload="uploadImageCheck"
                        :show-file-list="false"
                        :file-list="fileList"
                        :on-success="handleSuccess"
                        class="upload-btn">
                        <el-button type="primary" class="ml-10">
                          <i class="icon-commonyunduanshangchuan el-icon--left"/>传图片
                        </el-button>
                      </el-upload>

                      <el-button
                        v-if="tableInfo.informationStatus!=='已结案'"
                        type="warning"
                        class="ml-10"
                        @click="getFinalTypes"
                      ><i class="icon-commonyishouquan el-icon--left"/>结案</el-button>

                      <el-dialog
                        :visible.sync="evenTypeVisible"
                        title="结案"
                        width="25%"
                        style="text-align:left;"
                      >
                        <el-form
                          ref="finalFrom"
                          :model="finalFrom"
                          :rules="rules"
                          class="demo-form-inline"
                        >
                          <el-form-item
                            :label-width="evenFormLabelWidth"
                            label="分类"
                            prop="finalTypeId"
                          >
                            <el-select v-model="finalFrom.finalTypeId" placeholder="请选择">
                              <el-option
                                v-for="item in finalTypes"
                                :key="item.finalTypeName"
                                :label="item.finalTypeName"
                                :value="item.finalTypeId"
                              />
                            </el-select>
                          </el-form-item>

                          <el-form-item
                            :label-width="evenFormLabelWidth"
                            label="计入评分"
                            prop="informationScoreMark"
                          >
                            <el-radio v-model="finalFrom.informationScoreMark" label="Y">是</el-radio>
                            <el-radio v-model="finalFrom.informationScoreMark" label="N">否</el-radio>
                          </el-form-item>
                        </el-form>

                        <div slot="footer" class="dialog-footer">
                          <el-button @click="cancelFinal('finalFrom')">取 消</el-button>
                          <el-button type="primary" @click="finalTraceInfo('finalFrom')">提 交</el-button>
                        </div>
                      </el-dialog>
                    </el-row>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content">
                  <div class="grid-header">
                    <div class="header-content p-10-20 p-t_b-19 clearfix" style="min-height: 60px;">
                      <span style="font-weight: 700;">信息</span>
                    </div>
                  </div>
                  <el-row class="p-10-20 f-14 trace-info">
                    <p><label>信息来源：</label><span>{{ tableInfo.informationFromType }}</span></p>
                    <p><label>工单：</label><span class="order-number" @click="openOrderDetail(tableInfo.orderId)">{{ tableInfo.orderNumber }}</span></p>
                    <p><label>联系人：</label><span>{{ tableInfo.contactsName }}</span></p>
                    <p><label>联系电话：</label><span>{{ tableInfo.contactsPhone }}</span></p>
                    <p><label>创建人：</label><span>{{ tableInfo.userName }}</span></p>
                    <p><label>创建时间：</label><span>{{ !tableInfo.createDatetime ? '--' :tableInfo.createDatetime |parseTime('{y}-{m}-{d}') }}</span></p>
                    <p><label>关联师傅名称：</label><span>{{ tableInfo.wokerName }}</span></p>
                    <p><label>关联师傅电话：</label><span>{{ tableInfo.wokerMobile }}</span></p>
                    <p>
                      <label>责任组：</label>
                      <span>{{ tableInfo.problemDescribe?tableInfo.problemDescribe:'--' }}</span>
                    </p>
                    <p>
                      <label>最近结案类型：</label>
                      <span>{{ tableInfo.finalTypeName?tableInfo.finalTypeName:'--' }}</span>
                    </p>
                    <p>
                      <label>计算催投评分：</label>
                      <span>{{ tableInfo.informationScoreMark==='Y'?'是':'否' }}</span>
                    </p>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-drawer
            :visible.sync="orderDetailVisible"
            :show-close="false"
            custom-class="order-detail"
            size="50%">
            <iframe :src="orderDetailUrl" width="100%" height="700" frameborder="0"/>
          </el-drawer>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {
  getCusInfoOrders,
  getCusOrderTraces,
  sendTraceInfo,
  editTraceInfo,
  getFinalTypes,
  finalTraceInfo,
  checkOrderInfoNumber
} from '@/api/information'
import { parseTime, pickerOptions } from '@/utils'
import { isAssetTypeAnImage } from '@/api/utils'
import { getToken } from '@/utils/auth'
export default {
  filters: {},
  data() {
    return {
      createTime: '',
      activeName: '5',
      messageImage: '',
      overInfor: false,
      evenTypeVisible: false,
      dialogImageVisible: false,
      orderDetailVisible: false,
      orderDetailUrl: '',
      fileList: [],
      importImageUrl:
        '/wxh-cloud-rest/rest/' + getToken() + '/cusInfoOrder/save',
      remark: '',
      total: 1,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 10,
        keyword: null,
        queryType: null,
        informationEvenType: null,
        time: null,
        createTimeStart: null,
        createTimeEnd: null,
        pageNumber: null
      },
      pageSizeOptions: [
        {
          value: 10,
          label: '10条/页'
        },
        {
          value: 20,
          label: '20条/页'
        },
        {
          value: 30,
          label: '30条/页'
        },
        {
          value: 50,
          label: '50条/页'
        }
      ],
      tableData: [],
      tableInfo: {},

      snedMsg: '',
      disabledRemark: false,
      messageData: [],
      infoType: '',
      infoTypeOptions: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '投诉',
          label: '投诉'
        },
        {
          value: '咨询',
          label: '咨询'
        },
        {
          value: '需求',
          label: '需求'
        }
      ],
      pickerOptions: {
        shortcuts: pickerOptions
      },
      rules: {
        finalTypeId: [
          { required: true, message: '请选择结案分类', trigger: 'change' }
        ],
        informationScoreMark: [
          { required: true, message: '请选择计入评分', trigger: 'change' }
        ]
      },
      evenFormLabelWidth: '100px',
      currentRow: null,
      finalTypes: [],
      finalFrom: {
        informationScoreMark: 'Y',
        finalTypeId: ''
      },
      handleName: '全部',
      handleValue: '5'
    }
  },
  computed: {},
  watch: {
    messageData() {
      this.$nextTick(() => {
        var container = this.$el.querySelector('#message-body')
        container.scrollTop = container.scrollHeight
      })
    }
  },
  created() {
    this.listQuery.keyword = this.$route.query.cusInfoNumber
    console.log('传输参数：' + this.$route.query.cusInfoNumber)
    if (this.$route.query.cusInfoNumber !== null && this.$route.query.cusInfoNumber !== '' && this.$route.query.cusInfoNumber !== undefined) {
      this.activeName = '10'
    }
    this.getList()
  },
  mounted() {},
  methods: {
    formatterRemark(row, column) {
      if (row.remark.length >= 15) {
        return row.remark.substr(0, 15) + '...'
      }
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row)
      this.initChangeTable(row)
    },
    initChangeTable(row) {
      this.$set(row, 'readCount', 0)
      this.currentRow = row
    },
    currentChangeTable(row) {
      this.$set(row, 'readCount', 0)
      this.currentRow = row
      // 获取跟踪记录 TODO
      if (this.tableData) {
        // 选择记录
        for (var i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].informationId === row.informationId) {
            this.tableInfo = this.tableData[i]
            this.$set(this.tableInfo, 'syncWithPartner', false)

            this.getCusOrderTraces(this.tableInfo.informationNumber)
          }
        }
      }
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    getCusOrderTraces(val) {
      var data = {
        informationNumber: val
      }
      getCusOrderTraces(data)
        .then(response => {
          if (response.data.status === 'success') {
            /* if (
              !this.tableInfo.informationNumber ||
              this.tableInfo.informationStatus === '已结案' ||
              !this.tableInfo.permission
            ) {
              if (this.tableInfo.informationStatus === '待处理') {
                this.snedMsg = '当前信息单已下送，无须备注'
              } else if (this.tableInfo.informationStatus === '已结案') {
                this.snedMsg = '当前信息单已结案，无须备注'
              }
              this.disabledRemark = true
            } else {
              this.snedMsg = null
              this.disabledRemark = false
            }*/
            // demo data
            // this.messageData = demoData
            if (response.data.data.length === 0) {
              this.listLoading = false
              // this.messageData = []
              return
            }
            this.messageData = response.data.data
            this.listLoading = false
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
            this.listLoading = false
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
          this.listLoading = false
        })
    },
    getList() {
      this.listLoading = true
      this.listQuery.pageNumber =
        (this.listQuery.page - 1) * this.listQuery.pageSize
      this.listQuery.informationEvenType = this.infoType
      this.listQuery.queryType = this.activeName
      getCusInfoOrders(this.listQuery)
        .then(response => {
          if (response.data.status === 'success') {
            this.total = response.data.data.total
            if (response.data.data.list.length === 0) {
              this.listLoading = false
              this.messageData = []
              this.tableData = []
              this.tableInfo = {}
              return
            }
            this.tableData = response.data.data.list
            this.setCurrent(this.tableData[0])
            this.listLoading = false
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
            this.listLoading = false
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
          this.listLoading = false
        })
    },
    searchFrom() {
      if (this.listQuery.time !== null && this.listQuery.time !== '') {
        this.listQuery.createTimeStart = parseTime(
          this.listQuery.time[0],
          '{y}-{m}-{d} {h}:{i}'
        )
        this.listQuery.createTimeEnd = parseTime(
          this.listQuery.time[1],
          '{y}-{m}-{d} {h}:{i}'
        )
      } else {
        this.listQuery.createTimeStart = null
        this.listQuery.createTimeEnd = null
      }
      this.listQuery.pageNumber = 0
      this.listQuery.page = 1
      this.getList()
    },
    handleClick(tab, event) {
      this.infoType = ''
      this.listQuery.page = 1
      this.getList()
    },
    handleCommand(command) {
      this.listQuery.page = 1
      this.activeName = command
      this.handleValue = command
      this.infoType = ''
      if (command === '3') {
        this.handleName = '跟进中(未)'
      }
      if (command === '6') {
        this.handleName = '跟进中(已)'
      }
      if (command === '4') {
        this.handleName = '已结案'
      }
      if (command === '5') {
        this.handleName = '全部'
      }
      this.getList()
    },
    uploadImageCheck(file, fileList) {
      const self = this
      const isIMAGE = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/svg+xml'
      const isLt4M = file.size / 1024 / 1024 < 4
      if (!isIMAGE) {
        self.$message.error('发送图片只能是 JPG、PNG和GIF 格式!')
      }
      if (!isLt4M) {
        self.$message.error('发送图片大小不能超过 4MB!')
      }
      return isIMAGE && isLt4M
    },
    sendTraceInfo() {
      if (!this.snedMsg || this.snedMsg.replace(/(^\s*)/g, '').length === 0) {
        this.$message({
          message: '请输入备注或传达！',
          type: 'warning'
        })
        return
      }
      if (this.snedMsg.length > 200) {
        this.$message({
          message: '请输入200字以内的备注或传达！',
          type: 'warning'
        })
        return
      }
      var data = new FormData()
      // var data = {
      //   informationId :this.tableInfo.informationId,
      //   informationNumber :this.tableInfo.informationNumber,
      //   orderId :this.tableInfo.orderId,
      //   remark :this.snedMsg
      // }

      data.append('informationId', this.tableInfo.informationId)
      data.append('informationNumber', this.tableInfo.informationNumber)

      data.append('orderId', this.tableInfo.orderId)
      data.append('remark', this.snedMsg)
      this.$confirm('确认下送?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          sendTraceInfo(data)
            .then(response => {
              if (response.data.status === 'success') {
                this.$message({
                  message: '下送成功,处理下一条！',
                  type: 'success'
                })
                this.getList()
                this.snedMsg = null
              } else {
                this.$message({
                  message: response.data.messge
                    ? response.data.messge
                    : '下送失败，请联系技术人员处理',
                  type: 'warning'
                })
              }
            })
            .catch(error => {
              this.$message({
                message: '下送异常',
                type: 'warning'
              })
              console.log(error)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下送'
          })
        })
    },
    editTraceInfo() {
      debugger
      if (!this.snedMsg || this.snedMsg.replace(/(^\s*)/g, '').length === 0) {
        this.$message({
          message: '请输入备注或传达！',
          type: 'warning'
        })
        return
      }
      if (this.snedMsg.length > 200) {
        this.$message({
          message: '请输入200字以内的备注或传达！',
          type: 'warning'
        })
        return
      }
      var data = new FormData()
      // var data = {
      //   informationId :this.tableInfo.informationId,
      //   informationNumber :this.tableInfo.informationNumber,
      //   orderId :this.tableInfo.orderId,
      //   remark :this.snedMsg
      // }
      data.append('syncWithPartner', this.tableInfo.syncWithPartner)
      data.append('informationId', this.tableInfo.informationId)
      data.append('informationNumber', this.tableInfo.informationNumber)
      data.append('orderId', this.tableInfo.orderId)
      data.append('remark', this.snedMsg)
      editTraceInfo(data)
        .then(response => {
          if (response.data.status === 'success') {
            this.snedMsg = null
            // this.getList()
            this.getCusOrderTraces(this.tableInfo.informationNumber)
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.snedMsg = null
            // this.getList()
          } else {
            this.$message({
              message: response.data.messge
                ? response.data.messge
                : '保存失败，请联系技术人员处理',
              type: 'warning'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '保存异常',
            type: 'warning'
          })
          console.log(error)
        })
    },
    getFinalTypes() {
      var flag = false
      checkOrderInfoNumber(this.tableInfo.informationNumber).then(response => {
        flag = response.data
        if (flag) {
          this.evenTypeVisible = true
          getFinalTypes().then(response => {
            if (response.data.status === 'success') {
              if (response.data.data.length === 0) {
                this.listLoading = false
                this.finalTypes = []
                return
              }
              this.finalTypes = response.data.data
              this.listLoading = false
            } else if (response.data.status === 'token_check_faild') {
              this.$message({
                message: response.data.messge,
                type: 'warning'
              })
              this.listLoading = false
            }
          })
        } else {
          this.$message({
            message: '用户不是责任组成员，无结案权限',
            type: 'warning'
          })
        }
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '结案类型加载失败',
          type: 'warning'
        })
        this.listLoading = false
      })
    },
    immediatelyFinalTraceInfo() {
      var data = new FormData()
      data.append('informationId', this.tableInfo.informationId)
      data.append('informationNumber', this.tableInfo.informationNumber)
      data.append('orderId', this.tableInfo.orderId)
      data.append('remark', this.snedMsg)
      data.append('finalTypeId', this.finalFrom.finalTypeId)
      data.append('informationScoreMark', 'N')
      finalTraceInfo(data)
        .then(response => {
          if (response.data.status === 'success') {
            this.getList()
            this.$message({
              message: '结案成功',
              type: 'success'
            })
            this.snedMsg = ''
            this.overInfor = false
            this.getList()
          } else {
            this.$message({
              message: response.data.messge
                ? response.data.messge
                : '下送失败，请联系技术人员处理',
              type: 'warning'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '结案失败',
            type: 'warning'
          })
          console.log(error)
        })
    },
    cancelFinal(formName) {
      this.evenTypeVisible = false
      this.resetForm(formName)
    },
    finalTraceInfo(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var data = new FormData()
          data.append('informationId', this.tableInfo.informationId)
          data.append('informationNumber', this.tableInfo.informationNumber)
          data.append('orderId', this.tableInfo.orderId)
          data.append('remark', this.snedMsg)
          data.append('finalTypeId', this.finalFrom.finalTypeId)
          data.append(
            'informationScoreMark',
            this.finalFrom.informationScoreMark
          )
          this.$confirm('确认结案?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              finalTraceInfo(data)
                .then(response => {
                  if (response.data.status === 'success') {
                    this.$message({
                      message: '结案成功',
                      type: 'success'
                    })
                    this.snedMsg = ''
                    this.getList()
                    // this.getCusOrderTraces(this.tableInfo.informationNumber)
                    this.resetForm(formName)
                    this.evenTypeVisible = false
                  } else {
                    this.$message({
                      message: '结案失败',
                      type: 'warning'
                    })
                  }
                })
                .catch(error => {
                  this.$message({
                    message: '结案失败',
                    type: 'warning'
                  })
                  console.log(error)
                })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消结案'
              })
            })
        } else {
          return
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    checkMessageImageType(message) {
      var index = message.lastIndexOf('.')
      if (!index || index === 0) {
        return false
      }
      var ext = message.substr(index + 1)
      return isAssetTypeAnImage(ext)
    },
    previewImage(image) {
      const self = this
      self.messageImage = image
      self.dialogImageVisible = true
    },
    openOrderDetail(id) {
      let order_url = ''
      if (document.domain === 'sso.banshouhui.com' || document.domain === 'system.banshouhui.com') {
        order_url = 'https://system.banshouhui.com/wxh-sts-web/sts/order/detail.html'
      } else {
        order_url = 'https://system.dev.banshouhui.com/wxh-sts-web/sts/order/detail.html'
      }
      this.orderDetailUrl = order_url + '?id=' + id + '&partnerId=&tabindex=1'
      this.orderDetailVisible = true
    },
    handleSuccess() {
      this.fileList = []
      this.snedMsg = null
      // this.getList()
      this.getCusOrderTraces(this.tableInfo.informationNumber)
      this.$message({
        message: '保存成功',
        type: 'success'
      })
    }
  }
}
</script>

<style>
.el-col {
  border-radius: 4px;
}
.bg-white {
  background: #ffffff;
}
.grid-content {
  border-radius: 4px;
  height: 100%;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f3f3f4;
}
.el-table__header-wrapper {
  display: none;
}
.info-table {
  margin-left: 10px;
  margin-right: 10px;
}
.bg-purple {
  background: #196;
}
.time {
  font-size: 12px;
  color: #8f97a4;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.item {
  margin-top: 10px;
}
.text-right {
  text-align: right;
}
.el-date-editor.el-input {
  width: 100%;
}
.f-12 {
  font-size: 12px;
}
.f-14 {
  font-size: 14px;
}
.p-b-15 {
  padding-bottom: 15px;
}
.p-b-5 {
  padding-bottom: 15px;
}
.p-t-5 {
  padding-top: 5px;
}
.p-n {
  padding: 0px;
}
.p-t-n {
  padding-top: 0;
}
.p-10 {
  padding: 10px;
}
.p-20 {
  padding: 20px;
}
.p-t-20 {
  padding-top: 20px;
}
.p-10-20 {
  padding: 10px 20px;
}
.p-t_b-19 {
  padding-top: 19px;
  padding-bottom: 19px;
}
.border-1 {
  border: #ebeef5 1px solid;
}
.el-card {
  height: 100%;
}
.right-vertical {
  border-right: #ebeef5 1px solid;
  border-radius: unset;
}
.el-card__body {
  height: 100%;
  padding: 0px;
}
.full-height {
  height: 100%;
}
.full-width {
  width: 100% !important;
}
.el-card__header {
  border: none;
}
.header-content {
  padding-top: 18px;
  border-bottom: #ebeef5 1px solid;
}
.grid-body {
  overflow-y: auto;
  height: 534px;
  min-height: 500px;
  border-bottom: #ebeef5 1px solid;
}
.grid-bottom {
  min-height: 200px;
}
.text-right {
  text-align: right;
}
label {
  color: #999;
  font-weight: 500;
}
ul {
  list-style: none;
}
* {
  box-sizing: border-box;
}
.message {
  height: calc(100% - 160px);
  padding: 10px 15px;
}
.message ul {
  margin: 0;
  padding: 0;
}
.message li {
  margin-bottom: 15px;
}
.message .time {
  width: 100%;
  display: flex;
  justify-content: center;
  color: #8f97a4;
  font-size: 12px;
  margin: 7px 0;
}
.message .avatar {
  float: left;
  margin: 0 10px 0 0;
  font-size: 24px;
  width: 60px;
  height: 60px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #1b263a;
  font-weight: 600;
  background: #f5f9fc;
}
.message .self .avatar {
  float: right;
  margin: 0 0 0 10px;
}
.message .text {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  line-height: 1.5;
  max-width: calc(100% - 40px);
  min-height: 30px;
  font-size: 12px;
  text-align: left;
  word-break: break-all;
  background-color: #fafafa;
  border-radius: 4px;
}
.message .self {
  text-align: right;
}
.message .self .text {
  background-color: #b2e281;
}
.message .text p {
    margin-block-start: 6px;
    margin-block-end: 6px;
}
.el-card__header {
  padding: 0px 0 0 0;
}
.el-pagination__total,
.el-pagination__sizes,
.btn-prev,
.el-pager,
.btn-next,
.el-pagination__jump {
  margin-top: 10px !important;
}
.el-pagination {
  white-space: pre-wrap;
}
.el-tabs__item.is-active {
  font-weight: 600;
  color: #28a087;
}
.el-tabs__item {
  height: 60px;
  line-height: 60px;
}
.el-tabs__active-bar {
  background-color: #28a087;
}
.el-tabs__item:hover {
  color: #28a087;
}
.el-dropdown {
  color: inherit;
}
.el-dropdown-menu--medium .el-dropdown-menu__item:hover {
  color: #28a087;
}
.el-range-editor--small.el-input__inner {
  height: 36px;
}
.default-color {
  color: #28a087;
}
.default-background-color {
  background-color: #28a087;
}
.circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: #666;
}
.el-button--primary:focus,
.el-button--primary:hover {
  background: #28a087;
  border-color: #28a087;
  color: #fff;
}
/* .el-button:focus,
.el-button:hover {
  color: #fff;
  border-color: #c6e2ff;
  background-color: #28a087;
} */
.el-button--primary {
  border-color: #28a087;
}
.font-color {
  color: #fff;
}
.el-table tr {
    display: grid;
    border: 1px solid #e9edf0;
    border-color: #e9edf0;
}
.el-table__row {
  border: 1px solid #e9edf0;
  margin-top: 6px;
}
tr:first-child {
  margin-top: 0;
}
.el-table td, .el-table th.is-leaf {
  border: none;
}
.el-table__body tr.current-row>td {
  background-color: #e7eef8;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #28a087;
    color: #fff;
}
.el-button--text {
    color: #28a087;
}

.status-item {
  margin-top: 25px;
  margin-right: 40px;
}
.message .status {
  margin-left: 70px;
}
.message .self .status {
  margin-right: 70px;
}
.message .image-context {
  width: auto;
  height: 100px;
  display: inline-block;
  position: relative;
  max-width: calc(100% - 40px);
}

.message .image-slot {
  width: 100px;
  height: 100px;
  background-color: #f0f2fA;
  display: flex;
  justify-content: center;
  border-radius: 4px;
}
.message .image-slot i {
  align-self: center;
}

.el-image__error, .el-image__inner, .el-image__placeholder {
    border-radius: 4px;
    width: auto;
    height: 100px;
}
.order-number {
  color: #28a087;
  cursor: pointer;
}
.upload-btn {
  display: inline-block;
}

.trace-info p {
  line-height: 20px
}

.el-tabs__header .el-tabs__nav{
    min-height: 60px;
}
.order-detail .el-drawer__header{
  display: none;
}
/* .el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #fff;
} */
</style>

